<template>
  <div class="wrapper">
    <!-- <mt-header fixed title="">
      <router-link to="/home" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header> -->
    <div class="login-form">
      <div class="login-avatar">
        <img class="login-ico" src="../assets/ico/wogerenziliao.png" alt="">
      </div>
      <div class="login-form-item input-model"
      style="margin-top:1.32rem;"
      >
        <img v-show="$state.theme != 'red'" class="login-ico" src="../assets/ico/loginuser.png" alt="">
        <img v-show="$state.theme == 'red'" class="login-ico" src="../assets/ico/loginuser-red.png" alt="">
        <input
        class="login-input"
        placeholder="用户名"
        type="tel" pattern="[0-9]*"
        v-model="phone"
        >
      </div>
      <div class="login-form-item input-model">
        <img v-show="$state.theme != 'red'" class="login-ico" src="../assets/ico/loginpwd.png" alt="">
        <img v-show="$state.theme == 'red'" class="login-ico" src="../assets/ico/loginpwd-pwd.png" alt="">
        <input class="login-input" type="password" placeholder="密码" v-model="psd">
      </div>
      <div class="login-form-item submit-model" @click="gook">
        立即登录<i v-show="isloading" style="color:#fff;" class="iconfont icon-jiazaizhong"></i>
      </div>
      <div class="login-form-item extra-model">
        <div style="color:#0E6580"><span @click="toForget">忘记密码？</span></div>
      </div>
    </div>
    <!-- <div class="text-center">
      <img class="banenr" :src="logo" alt="logo">
    </div> -->
    <!-- <div class="forms"> -->
      <!-- <div class="form-view">
        <icon class="form-ic" name="phone" slot="icon"></icon>
        <i class="iconfont icon-yonghu"></i>
        <input type="tel" pattern="[0-9]*" placeholder="手机号码" v-model="phone">
      </div> -->
      <!-- <div class="form-view">
          <i class="iconfont icon-yanzhengma"></i>
          <input type="number" pattern="[0-9]*" placeholder="验证码" v-model="code">
          <span v-if="codeshow" class="getcode" @click="getcode">获取验证码</span>
          <span v-if="!codeshow" class="getcode">{{count}}s</span>
      </div> -->
      <!-- <div class="form-view"> -->
        <!-- <icon class="form-ic" name="safe" slot="icon"></icon> -->
        <!-- <i class="iconfont icon-lr_password"></i> -->
        <!-- <input type="password" autocomplete="new-password" pattern="[0-9]*" placeholder="请输入密码" v-model="psd"> -->
      <!-- </div> -->
    <!-- </div> -->
    <!-- <div class="chebox">
        <span class="checked">
            <input id="checkcode" type="checkbox" :checked="isChecked" @click="handleDisabled"/>
            <label for="checkcode"></label>一天内自动登陆
        </span>
    </div> -->
    <!-- <div class="btnbox">
        <span class="btnok" @click="gook">
            确定
            <i v-show="isloading" style="color:#fff;" class="iconfont icon-jiazaizhong"></i>
        </span>
    </div>
    <div>
      <mt-button class="text-btn fl" type="default" @click="toForget">忘记密码</mt-button>
      <mt-button class="text-btn fr" type="default" @click="toRegister">注册</mt-button>
    </div> -->

  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import { isNull, isPhone } from '@/utils/utils'
import * as api from '@/axios/api'

export default {
  data () {
    return {
      isloading: false,
      phone: '',
      code: '',
      psd: '',
      isChecked: true, // 自动登录
      isDisabled: false,
      codeshow: true,
      count: '', // 倒计时
      clickFalg: 0, //  点击次数
      logo: '' // 设置信息
    }
  },
  created: function () {
    this.$setgoindex()
  },
  mounted: function () {
    this.getInfoSite()
    this.phone = this.$store.state.userInfo.phone
  },
  methods: {
    async getInfoSite () {
      // 获取 logo
      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.logo = data.data.siteLogoSm
      } else {
        Toast(data.msg)
      }
    },
    async checkPhone () {
      // 先验证是否已经注册
      let data = await api.checkPhone({ phoneNum: this.phone })
      if (data.status === 0) {
        // 如果用户已存在返回 0
        this.loginIN()
      } else {
        Toast('用户还未注册,请先注册')
        // this.$router.push('/register')
      }
    },
    gook () {
      // 登录
      if (this.clickFalg !== 0) {
        this.clickFalg = 0
        return
      }
      this.clickFalg++
      if (isNull(this.phone) || !isPhone(this.phone)) {
        Toast('请输入正确的手机号码')
      } else if (isNull(this.psd)) {
        Toast('请输入密码')
      } else {
        this.checkPhone()
      }
    },
    async loginIN () {
      let opts = {
        phone: this.phone,
        userPwd: this.psd
      }
      this.isloading = true
      let data = await api.login(opts)
      this.clickFalg = 0
      if (data.status === 0) {
        this.$store.state.userInfo.phone = this.phone
        // this.$store.state.userInfo.token = data.data.cookie
        this.clickFalg = 0
        // this.clearCookie()
        // this.setCookie(data.data.key,data.data.token,0)
        this.$router.push('/home')
      } else {
        Toast(data.msg)
      }
      this.isloading = false
    },
    handleDisabled: function () {
      this.isChecked = !this.isChecked
      if (this.isChecked === true) {
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
    },
    toForget () {
      // 忘记密码
      this.$router.push('/forget')
    },
    toRegister () {
      // 注册
      this.$router.push('/register')
    },
    toHome () {
      this.$router.push('/home')
    },
    goBack () {
      if (this.$route.query.goindex === 'true') {
        this.$router.push('/')
      } else {
        this.$router.back(-1)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  body {
    background-color: #16171d;
  }

  .wrapper {
    color: #888;
    height: 100%;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: .1rem;
  }

  .login-form {
    display: block;
    width: 6.13rem;
    height: 5.58rem;
    background-color: #1B1C25;
    position: relative;
    box-shadow: 0 0 .1rem .1rem #0002;
    .login-avatar {
      width: 1.2rem;
      height: 1.2rem;
      background-color: #444656;
      border-radius: 50%;
      position: absolute;
      top: -.6rem;
      left: 2.46rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 .1rem .1rem #0002;
      img {
        width: .55rem;
        height: .58rem;
      }
    }
    .login-form-item {
      width: 4.95rem;
      height: .66rem;
      border-radius: .33rem;
      margin: .45rem auto 0;
      &.input-model {
        background-color: #121319;
        padding: 0 .33rem;
        display: flex;
        align-items: center;
        img.login-ico {
          width: .2rem;
          height: .23rem;
        }
        .login-input {
          flex: 1;
          padding: 0 .2rem;
          &::-webkit-input-placeholder {
            color: #363636;
          }
        }
      }
      &.submit-model {
        background-color: #024DA1;
        line-height: .66rem;
        text-align: center;
        color: #ffffff;
      }
      &.extra-model {
        margin-top: .24rem;
        display: flex;
        justify-content: space-between;
        font-size: .2rem;
      }
    }
  }
  .red-theme{
    .login-avatar{
      background-color: #222222;
    }
    .login-form{
      background-color: #fff;
    }
    .login-form-item.input-model{
      background-color: #fff;
      border: 1px solid #C9C9C9;
    }
    .login-form-item.submit-model{
      background-color: #BB1815;
    }
  }
</style>


